<template>
	<view>


		<scroll-view class="comment-area" scroll-y="true">

			<view class="codefun-flex-col page space-y-20">
				<view v-for="(item, index) in comments" :key="index" class="comment-item">
					<comment2 :comment2="item"></comment2>
				</view>


			</view>
		</scroll-view>
		<view class="comment-input">
			<input v-model="newComment" placeholder="发表评论"></input>
			<button @click="addComment">发送</button>
		</view>
	</view>
</template>

<script>
	import comment2 from "../../components/comment2/comment2.vue"
	export default {
		components: {
			comment2
		},
		data() {
			return {
				noteID: 1,
				comments: [],
				newComment: '',
			};
		},
		onLoad(e) {
			let that = this
			that.noteID = e.subnoteid
			console.log(77+that.noteID)
			uni.request({
				url: '/remark/getRemarkByNoteId/' + that.noteID,
				method: 'GET',

				success: (res) => {
					that.comments.push.apply(that.comments,res.data)

				}
			})
			
		},
		methods: {
			addComment() {
				if (this.newComment) {
					this.comments.push(this.newComment);
					this.newComment = '';
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.comment-area {
		height: 1350rpx;
	}

	.page {
		padding: 59.3rpx 27.91rpx 408.14rpx 38.37rpx;
		background-image: linear-gradient(0deg, #fff1eb 0%, #ace0f9 100%);
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.list-item {
			padding: 13.95rpx 0 27.91rpx 13.95rpx;
			background-color: #edfaff;
			border-radius: 17.44rpx;
			border: solid 8.72rpx #5fb1cf;

			.space-x-16 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 27.91rpx;
				}

				.image {
					border-radius: 50%;
					width: 92.44rpx;
					height: 92.44rpx;
				}

				.space-y-14 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 24.42rpx;
					}

					.font_1 {
						font-size: 31.4rpx;
						font-family: AlimamaShuHeiTi;
						line-height: 28.78rpx;
						color: #5fb1cf;
					}

					.text {
						margin-left: 10.47rpx;
					}

					.font_2 {
						font-size: 24.42rpx;
						font-family: AlimamaShuHeiTi;
						line-height: 22.67rpx;
						color: #468aa3;
					}
				}
			}

			.font_3 {
				font-size: 24.42rpx;
				font-family: AlimamaShuHeiTi;
				line-height: 17.44rpx;
				color: #5fb1cf;
			}

			.text_2 {
				margin-left: 20.93rpx;
			}
		}

		.space-y-106 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 184.88rpx;
			}
		}
	}

	.space-y-20 {

		&>view:not(:first-child),
		&>text:not(:first-child),
		&>image:not(:first-child) {
			margin-top: 34.88rpx;
		}
	}

	.comment-input {
		display: flex;
		align-items: center;
		height: 200rpx;
	}

	.comment-input input {

		background-color: #f5f5f5;
		padding: 10rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
		margin-left: 50rpx;
	}

	.comment-input button {
		height: 70rpx;
		width: 120rpx;
		font-size: 30rpx;
		background-color: #2d8cf0;
		color: #ffffff;
		border-radius: 10rpx;
	}
</style>